$tabs-tab-background-color: #e6ecef !default;
$tabs-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.01) !default;
$tabs-border: solid 1px #dfe7ec !default;
$tabs-tab-color: rgba($charcoal-grey, 0.5) !default;
$tabs-selected-tab-color: $charcoal-grey !default;
$tabs-tab-font-weight: 600 !default;
$tabs-background-color: $white !default;
$tabs-tab-padding: 0.375rem 1.875rem !default;
$tabs-padding: 1.25rem !default;
$tabs-tab-selected-top-border-color: $default-link !default;
$tabs-hover-color: $default-link !default;
$tabs-hover-background-color: $tabs-background-color !default;
$tabs-border-radius: $border-radius !default;

.rz-tabview {
  display: flex;
  flex-direction: column;
}

.rz-tabview-nav {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;

  li {
    border: $tabs-border;
    border-top-width: 2px;
    border-bottom-color: $tabs-tab-background-color;
    background-color: $tabs-tab-background-color;
    border-radius: $tabs-border-radius $tabs-border-radius 0 0;

    &:hover {
      &:not(.rz-tabview-selected) {
        &:not(.rz-state-disabled) {
          background-color: $tabs-hover-background-color;
          border-top-color: $tabs-tab-selected-top-border-color;

          a {
            color: $tabs-hover-color;
          }
        }
      }
    }

    a {
      display: inline-flex;
      align-items: center;
      color: $tabs-tab-color;
      padding: $tabs-tab-padding;
      font-weight: $tabs-tab-font-weight;

      &:hover {
        text-decoration: none;
      }
    }

    &.rz-state-disabled {
      opacity: 0.5;
    }
  }

  .rz-tabview-selected {
    background-color: $tabs-background-color;
    border-bottom-color: $tabs-background-color;
    margin-bottom: -1px;
    position: relative;
    border-top-color: $tabs-tab-selected-top-border-color;

    a {
      color: $tabs-selected-tab-color;
    }
  }
}

.rz-tabview-panels {
  background-color: $tabs-background-color;
  border: $tabs-border;
  border-radius: 0 0 $border-radius $border-radius;
  box-shadow: $tabs-shadow;
  flex: 1;
  overflow: auto;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .rz-tabview-panels {
    flex: auto;
  }
}

.rz-tabview-panel {
  padding: $tabs-padding;
}

.rz-tabview-left-icon {
  font-size: 1.0625rem;
}
